<template>
  <div class="play-list-collection">
    <m-header class="header">
      <div slot="left" @click="$router.push('/discovery')">
        <i class="iconfont icon-xiangzuo" />
      </div>
      <div slot="middle">歌单广场</div>
    </m-header>
    <tab-swipe :tabs='tabs' :remote-method='getData'>
      <div slot-scope="{data}" class="collection clearfix" >
        <card v-for="(playList, index) of data"
              :image='playList.coverImgUrl'
              :title="playList.name"
              :key="index"
              @touchend.native="toPlaylistDetail(playList)"
              @touchmove.native="touchmove"
        >
          <div slot="top">
            <i class="iconfont icon-icon--"/>
            <span>{{ playList.playCount }}</span>
          </div>
        </card>
      </div>
    </tab-swipe>
    <transition name="enter">
      <router-view />
    </transition>
  </div>
</template>
<script>
import TabSwipe from 'base/tab-swipe'
import { highquality, playlist } from 'api/top'
import PlayList from '@/entity/PlayList'
import Card from 'base/card'
import MHeader from 'base/m-header'

const tabs = [
  {
    title: '推荐',
    value: ''
  },
  {
    title: '官方',
    value: '官方'
  },
  {
    title: '精品',
    value: 'boutique'
  },
  {
    title: '电子',
    value: '电子'
  },
  {
    title: '华语',
    value: '华语'
  },
  {
    title: 'ACG',
    value: 'ACG'
  },
  {
    title: '民谣',
    value: '民谣'
  },
  {
    title: '电子',
    value: '电子'
  },
  {
    title: '轻音乐',
    value: '轻音乐'
  }
]

export default {
  components: {
    TabSwipe,
    Card,
    MHeader
  },
  computed: {
    tabs() {
      return tabs
    }
  },
  data() {
    return {
      record: {},
      activeTitle: '',
      ismove: false
    }
  },
  methods: {
    getData({ value, offset }) {
      const fn = value === 'boutique' ? highquality : playlist
      const cat = value === 'boutique' ? null : value
      return this.convertData(fn, cat, offset)
    },
    convertData(fnc, cat, offset = 0) {
      const limit = 21
      offset = offset * limit
      return new Promise((resolve) => {
        fnc({
          limit,
          offset,
          cat
        }).then(res => {
          const { playlists = [] } = res
          resolve(playlists.map(item => new PlayList(item)))
        }).catch(error => {
          console.log(error)
          resolve([])
        })
      })
    },
    touchmove() {
      this.ismove = true
    },
    toPlaylistDetail(playlist) {
      if (this.ismove) {
        this.ismove = false
        return
      }
      this.$router.push({
        path: `collection/${playlist.id}`
      })
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@/style/mixins.less';
.play-list-collection{
  position:fixed;
  top: 0;
  bottom: 0;
  background-color: white;
	width: 100%;

  .collection{
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    >div{
      width: 33%;
    }
  }
}
</style>